import React, {Component} from 'react'
import {connect} from "react-redux";
import {actionCreators} from '../store'
import {Link} from 'react-router-dom'
import {
    ListItem,
    ListInfo,
    LoadMove
} from '../style'

class List extends Component{
    render(){
        const {articleList,getMoveList,articlePage} = this.props
        return(
            <div>
                {articleList.map((artcle,index)=>{
                    return (
                        <Link to={"/detail/"+artcle.get('id')} key={index}>
                            <ListItem >
                                <img src={artcle.get('imgurl')} className="pic" alt=''/>
                                <ListInfo>
                                    <h3 className='title'>{artcle.get('title')}</h3>
                                    <p className='desc'>
                                        {artcle.get('content')}
                                    </p>
                                </ListInfo>
                            </ListItem>
                        </Link>
                    )
                })}
               <LoadMove onClick={()=>getMoveList(articlePage)}>加载更多</LoadMove>
            </div>
        )
    }
}
const mapState=(state)=>({

    articleList:state.getIn(['home','articleList']),
    articlePage:state.getIn(['home','articlePage'])
});
const mapDispatch =(dispatch)=>({
    getMoveList(page){
      dispatch(actionCreators.getMove(page))
    }
})
export default connect(mapState,mapDispatch)(List)